@use "sass:color";
@use "../components/forms/input.scss";
@use "../components/forms/textarea.scss";
@use "../components/forms/select.scss";
@use "../variables.scss";

.Form-label {
  font-size: 14px;
  font-weight: 700;
  color: variables.$text-color-primary;
  margin-bottom: 12px;
}
.Form-label-subtext {
  font-size: 12px;
  line-height: 18px;
  color: variables.$text-color-body-copy;
  font-weight: 400;
}

.BoxedCheckbox {
  border: 1px solid variables.$border-color;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
  transition: border 0.2s;

  .input-wrapper {
    padding-left: 12px;
  }
  input {
    margin: 0;
  }
  label {
    padding: 12px 12px 12px 10px;
  }

  &.is-active {
    border-color: var(--primary-color);
    background-color: variables.$primary-light-color;
    &:hover {
      border-color: var(--primary-color);
    }
  }

  &.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    &:hover {
      border-color: variables.$border-color;
    }
    > * {
      cursor: default;
    }
  }

  &:hover {
    border-color: color.adjust(variables.$border-color, $lightness: -30%);
  }
}

.gitops-checkboxes .BoxedCheckbox {
  min-height: 60px;
}
.replicated-select__value-container {
  height: 100%;
}

.replicated-select-container {
  .replicated-select__placeholder,
  .replicated-select__single-value {
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
  }

  .replicated-select__single-value {
    color: variables.$text-color-primary;
  }

  .replicated-select__dropdown-indicator {
    transition: all 0.2s;
  }

  .replicated-select__control {
    border-color: variables.$border-color;
    cursor: pointer;
    &.replicated-select__control--is-focused {
      border-color: var(--primary-color);
      box-shadow: none;

      .replicated-select__dropdown-indicator {
        transform: rotate(180deg);
      }
    }
  }
  &.select-large {
    .replicated-select__control {
      height: 50px;
    }
  }

  .replicated-select__menu {
    border-color: variables.$border-color;
    font-size: 12px;
    font-weight: 500;
    color: variables.$text-color-primary;
    line-height: 15px;
    z-index: 6;
  }
  .replicated-select__option {
    cursor: pointer;
    padding: 12px;

    &.replicated-select__option--is-focused {
      background-color: variables.$primary-light-color;
      color: variables.$text-color-primary;
    }
  }

  &.app {
    width: 300px;
  }

  &.app-100 {
    width: 100%;
  }

  &.snapshot {
    width: 200px;
    .css-1eyizxz-control {
      border: 0;
      cursor: pointer;
      outline: none;
      position: relative;
      background-color: var(--primary-color);
      color: #ffffff;

      &:not(:disabled):hover {
        background-color: color.adjust(variables.$primary-color, $lightness: -8%);
      }
    }

    .replicated-select__control {
      border-color: var(--primary-color);
      cursor: pointer;
      &.replicated-select__control--is-focused {
        border-color: color.adjust(variables.$primary-color, $lightness: -8%);
        box-shadow: none;

        .replicated-select__dropdown-indicator {
          transform: rotate(180deg);
        }
      }
    }

    .css-f8ooy8-control {
      cursor: pointer;
      outline: none;
      position: relative;
      background-color: var(--primary-color);
      color: #ffffff;

      &:not(:disabled):hover {
        background-color: color.adjust(variables.$primary-color, $lightness: -8%);
      }
    }
    .css-dvua67-singleValue {
      top: 40%;
    }
    .css-bgvzuu-indicatorSeparator {
      margin-bottom: 2px;
      margin-top: 4px;
      height: 20px;
    }
    .css-1wy0on6 {
      background-color: var(--primary-color);
      color: #ffffff;
      border-radius: 4px;

      &:not(:disabled):hover {
        background-color: color.adjust(variables.$primary-color, $lightness: -8%);
      }
    }
    .css-16pqwjk-indicatorContainer {
      padding: 0 6px 0 6px;
    }
    .css-1thkkgx-indicatorContainer {
      padding: 0 6px 0 6px;
    }
  }
}
